<template>
  <div style="background-color: #ffffff;">
    <!-- :before-change="beforeChange" -->
    <!-- <HeadNav
      :title="'档口填报'"
      :leftArrow="false"></HeadNav> -->
    <div class="content">
      <div class="contentTop">
        <div class="contentTop-left">
          <img src="../../assets/images/dangkou.png" alt="" style="width: 34px; height: 34px;">
        </div>
        <div class="contentTop-right">
          <div class="contentTop-right-top">{{ stallName }}</div>
          <div class="contentTop-right-bottom">{{ currentDate }} 提交清单</div>
        </div>
      </div>
      <template v-if="detailList.length===0">
        <div class="contentMiddle"></div>
        <div class="contentBottom">
          <div style="margin-left: 24px; margin-right: 24px; width:calc(100% - 48px);">
            <van-button type="primary" class="loginBtn" @click="toCheck()">去填报 </van-button>
          </div>
          <div class="tips" @click="notApply">今日不填报</div>
        </div>
      </template>
      <template v-else>
        <!-- <template v-if="isSubmit"> -->
        <div class="contentBottom-data">
          <div class="detailItem" v-for="(item, index) in detailList" :key="index">
            <!-- <div class="name" v-if="item.specification && item.unit">{{ item.materialName }}{{
              item.specification ? '/' + item.specification:'' }}{{ item.unit ? '(' + item.unit + ')' : "" }}</div> -->
            <div class="name">{{ item.materialName }} {{ item.specification || item.unit ? '(' : '' }}
              {{ item.specification ? item.specification:'' }} {{item.specification && item.unit ? '/': ''}} {{ item.unit ? item.unit :'' }}  {{item.specification || item.unit ? ')' :''}} </div>
            <!-- <div
              class="name"
              v-if="item.specification!==null && item.specification !==undefined && item.unit!==null &&item.unit!==undefined ">{{ item.materialName }}({{ item.specification }}/{{ item.unit }})</div>

            <div
              class="name"
              v-else-if="(item.specification!==null && item.specification !==undefined) && item.unit===null || item.unit===undefined ">{{ item.materialName }}({{ item.specification }})</div>
            <div
              class="name"
              v-else-if="(item.specification===null || item.specification ===undefined )&& (item.unit!==null &&item.unit!==undefined )">{{ item.materialName }}({{ item.unit }})</div>
            <div
              class="name"
              v-else-if="(item.specification==null || item.specification ===undefined) && (item.unit===null || item.unit===undefined) ">{{ item.materialName }}</div> -->

            <div class="bottom">
              <div class="price"> ￥{{ item.price }}</div>
              <div class="num">{{ parseInt(item.num) }}</div>
              <div class="allPrice">￥{{ Number(item.amount).toFixed(2) }} </div>
            </div>
          </div>
        </div>
        <div class="sumBox">
          <div class="sumNum">共{{ detailList.length }}项</div>
          <div class="text">合计</div>
          <div class="sumPrice">￥{{ sumPrice }}</div>
        </div>
        <div style="margin-left: 24px; margin-right: 24px;padding-bottom: 30px; width:calc(100% - 48px);">
          <van-button type="primary" class="loginBtn" @click="toCheck()">重新填报 </van-button>
        </div>
      </template>
      <!-- <template v-if="isNot">
          <div class="empty_data">今日暂无数据</div>
        </template> -->
      <!-- </template> -->
    </div>
    <foot></foot>
    <van-popup v-model="showNotApply" :closeable="true" @close-on-click-overlay="closeSubmitPopup" round
      style="width: 80%;padding-bottom: 24px;">
      <div class="top_title">你确认今日不填报数据吗？</div>
      <div class="sub_btn" @click="submit">
        确定
      </div>
    </van-popup>
  </div>
</template>

<script>
/* eslint-disable */
import {authMixin} from '@/common/isLogin'
import { personInfoApi} from '@/api/user'
import {addStallReportApi ,stallTodayReportApi} from '@/api/stall'
import HeadNav from '@/components/HeadNav'
import foot from '../foot/foot.vue'
import { mapState } from 'vuex'
export default {
  name: 'SIndex',
  components: {
    HeadNav,
    foot
  },
  computed: {
    ...mapState({
      chooseLists: (state) => state.chooseData.chooseList
    })
  },
  watch: {
    active(newVal) {
      console.log('newVal', newVal)
      if (newVal === 0) {
        this.params.applyType = null
        this.loading = true
        this.contentData = []
        this.finished = false
        if (!this.finished) {
          this.onLoad(1)
        }
      } else {
        this.params.applyType = newVal
        this.loading = true
        this.contentData = []
        this.finished = false
        if (!this.finished) {
          this.onLoad(1)
        }
      }
    }
  },
  data() {
    return {
      active: 0,
      showNotApply:false,
      // detailsBox: {
      //   detailList: [
      //     {
      //       id: 1,
      //       name: '新东大鸡排  (件/20公斤)',
      //       price: '170',
      //       num: 2,
      //       allPrice: '340'
      //     },
      //     {
      //       id: 1,
      //       name: '鱼丸\虾丸（件/10公斤）',
      //       price: '115.00',
      //       num: 1,
      //       allPrice: '115'
      //     },
      //     {
      //       id: 1,
      //       name: '奥尔良腌料（袋/2斤）',
      //       price: '80',
      //       num: 2,
      //       allPrice: '160'
      //     },
      //     {
      //       id: 1,
      //       name: '螺蛳粉专用辣椒（袋/50斤）',
      //       price: '30',
      //       num: 3,
      //       allPrice: '90'
      //     },
      //     {
      //       id: 1,
      //       name: '鸡油（袋/2斤）',
      //       price: '18',
      //       num: 5,
      //       allPrice: '90'
      //     }
      //   ],
      //   sumPrice: '795',
      //   sumNum: '5'
      // },
      isSubmit: false,
      params: {

      },
      isNot:false,
      detailList:[], //明细列表
      sumPrice:'', //总价
      stallName:'运中食堂档口', //档口名称
      currentDate:'', //当天日期
      loadStatus:true,
    }
  },
  mounted() {
  //  document.title='档口填报'
    authMixin()
  },
  created() {
    authMixin()
    // 当天日期
    const timestamp = new Date().getTime();
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    this.currentDate = `${year}-${month}-${day}`;
    console.log(this.currentDate, 'this.currentDate');

    this._stallTodayReportApi()
    this._personInfoApi()
  },
  methods: {
   
    toCheck() {
      const item={}
      item.isReset=true
      this.$router.push({ 
        path: '/selectFillIn',
        query: { item: JSON.stringify(item) } 
      })

    },
    // 打开不提交的弹窗
    notApply(){
      this.showNotApply=true
    },
    // 确认不提交
    submit(){
      this.showNotApply=false
      addStallReportApi().then(res=>{
        console.log(res,'今日不填报')
        window.location.reload()
      })
    },
    // 关闭确认不提交
    closeSubmitPopup(){
      this.showNotApply=false
    },
    // 今日明细
    _stallTodayReportApi(){
      stallTodayReportApi().then(res=>{
        console.log(res,'777')
        if(res.code===200){
          if(res.data){
            this.detailList=res.data.reportChildList
            this.sumPrice=Number(res.data.amount).toFixed(2)
            this.stallName=res.data.stallName
          }
        }
      })
    },
    // 页面头部信息
    _personInfoApi() {
      personInfoApi().then(res => {
        console.log(res, 'userInfo')
        if (res.code === 200) {
          this.stallName = res.data.belong
        }
      })
    },
  },
  
  beforeDestroy() {
    console.log('index')
    window.removeEventListener('scroll', this.onLoad, true)
  }
}
</script>

<style lang="less" scoped>
span,
p {
  padding: 0;
  margin: 0;
}

/deep/.van-tab {
  z-index: 200;
  height: 44px;
  //  background:rgb(216, 143, 143);
}

/deep/.van-tabs__wrap .van-tabs__wrap--scrollable {
  position: fixed;
}

/deep/.van-tab--active {
  /* color: rgb(255, 152, 82); */
}

/deep/.van-tabs__line {
  height: 0.6vw;
  background-color: rgb(255, 152, 82);
}

.content {
  overflow: hidden;
  margin-bottom: 10px;
  padding-bottom: 50px;
}

.contentTop {
  background-color: white;
  padding: 25px 24px;
  // margin-top: 42px;  //headNav使用时  不注释
  display: flex;
  align-items: center;

  .contentTop-left {
    width: 54px;
    height: 54px;
    border-radius: 54px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contentTop-right {
    // display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    margin-left: 16px;
  }

  .contentTop-right-top {
    font-size: 18px;
    text-align: left;
    color: #000000;
    line-height: 18px;
  }

  .contentTop-right-bottom {
    font-size: 16px;
    line-height: 16px;
    text-align: left;
    color: #000000;
    margin-top: 12px;
  }
}

.contentMiddle {
  background-color: #f9f9f9;
  height: 15px;
}

.contentBottom {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  padding-top: 228px;
  padding-bottom: 228px;
}

.contentBottom-data {
  background-color: #f9f9f9;
  padding-top: 15px;
  padding-bottom: 15px;

  .detailItem {
    background-color: #ffffff;
    padding: 12px 24px;
    margin-bottom: 5px;

    .name {
      font-size: 16px;
      color: #000000;
    }

    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 18px;

      .price,
      .num {
        color: #999999;
        font-size: 15px;
      }

      .allPrice {
        font-size: 15px;
        color: #000000;
      }
    }
  }

  .detailItem:last-child {
    margin-bottom: 0px;
  }


}

.sumBox {
  display: flex;
  align-items: center;
  margin-top: 20px;
  padding-left: 24px;
  padding-bottom: 30px;

  .sumNum {
    font-size: 12px;
    color: #999999;
  }

  .text {
    color: #047DCB;
    font-size: 12px;
  }

  .sumPrice {
    font-size: 18px;
    color: #000000;
    margin-left: 8px;
    margin-right: 8px;
  }
}

/*清浮动*/
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

.clearfix {
  zoom: 1;
}

.fl {
  // width: 180px;
  color: #666666;
  float: left;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.fr {
  float: right;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(153, 153, 153, 0.5);
  font-size: 13px;
}

/deep/.van-tabs__wrap {
  touch-action: manipulation;
  border-top: none;
}

/deep/.van-tab {
  border-top: none;
  border-bottom: 1px solid rgba(245, 244, 249, 1);
}

.emptyContainer {
  // background: red;
  height: 50px;

  /deep/.van-list__finished-text {
    height: 400px;
    background: palegreen;
  }
}

// 去逛逛
.loginBtn {
  width: 100%;
  height: 45px;
  border: none;
  background: #047DCB;
  border-radius: 45px;
}

.tips {
  margin-top: 25px;
  font-size: 14px;
  text-align: right;
  color: #000000;
  line-height: 14px;
}


// 弹窗
.top_title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #000;
  font-size: 15px;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 30px;
}
// 弹窗确认按钮
.sub_btn {
  width: 80%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 22px;
  color: #fff;
  background: #047DCB;
  margin: 8px auto;
  font-size: 15px;
}

// 今日暂无数据
.empty_data{
  text-align: center;
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
